<template>
  <div style="margin:30px auto">
    {{counter}}
    <p>{{fullName}}</p>
    <p>{{storeprice}}</p>
    <p>{{courseprice}}</p>
    <p>getter:{{priceA}}</p>
    <p>getter:{{priceB}}</p>

  </div>
</template>

<script>
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
export default {
  name: 'GoodList',
  mounted () {
    console.log(this.$store.state.course)
    // this.updateCountAsync({
    //   num: 5,
    //   time: 2000
    // })
    // let i = 1
    // setInterval(() => {
    //   this.updataCount({
    //     num: i++,
    //     num2: 2
    //   })
    // }, 1000)
    this['drugStore/updataPrice'](2)
    this['course/updataPrice'](4)
    this['drugStore/clearZero'](2)
    this['course/clearZero'](4)
  },
  computed: {
    ...mapState({
      counter: 'count',
      storeprice: state => state.drugStore.totalPrice,
      courseprice: state => state.course.totalPrice
      // counter:()=> state.count
    }),
    // ['fullName'], 'drugStore/priceToString', 'course/priceToString'
    ...mapGetters({
      fullName: 'fullName',
      priceA: 'drugStore/priceToString',
      priceB: 'course/priceToString'
    })
    // count () {
    //   return this.$store.state.count
    // },
    // fullName () {
    //   return this.$store.getters.fullName
    // }
  },
  methods: {
    ...mapActions([
      'updateCountAsync',
      'drugStore/clearZero',
      'course/clearZero'
    ]),
    ...mapMutations([
      'updataCount',
      'drugStore/updataPrice',
      'course/updataPrice'
    ])
  }
}
</script>

<style scoped>
</style>
